<template>
  <main class="ticket-system" @click="emit('click')">
    <div class="top">
      <div class="printer" />
    </div>
    <div class="receipts-wrapper">
      <div class="receipts">
        <div class="receipt">
          <div class="route">
            <h2>{{ schedule.hallName }}</h2>
            -
            <h2>{{ schedule.subject }}</h2>
          </div>
          <div class="details">
            <div class="item">
              <span>开始时间</span>
              <h4>{{ dayjs(schedule.startDate).format("YYYY/MM/DD HH:mm") }}</h4>
            </div>
            <div class="item">
              <span>结束时间</span>
              <h4>{{ dayjs(schedule.endDate).format("YYYY/MM/DD HH:mm") }}</h4>
            </div>
            <div class="item">
              <span class="label">票证类型</span>
              <h4>{{ schedule.type === LayoutType.GRID ? "座位票" : "桌位票" }}</h4>
            </div>
            <div class="item">
              <span>{{ schedule.type === LayoutType.GRID ? "座位" : "桌子" }}位置</span>
              <h4>第{{ schedule.rowIndex }}行，第{{ schedule.colIndex }}列</h4>
            </div>
          </div>
        </div>
        <div class="qr-code">
          <div class="qr-code-image">
            <div ref="container"></div>
          </div>
          <div class="description">
            <h2>座位缩略图</h2>
            <p>点击查看</p>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { LayoutType, type SeatSchedule } from "@/types/banquet";
import dayjs from "dayjs";
import seatJson from "@/assets/seat.json";
import lottie from "lottie-web";
import { onMounted, ref } from "vue";

// lottie动画提示
const container = ref(null);

defineProps<{
  schedule: SeatSchedule;
}>();

const emit = defineEmits<{
  click: [];
}>();

onMounted(() => {
  if (container.value) {
    lottie.loadAnimation({
      container: container.value,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: seatJson,
    });
  }
});
</script>
<style lang="less" scoped>
.ticket-system {
  width: 100%;

  .top {
    display: flex;
    align-items: center;
    flex-direction: column;

    .printer {
      width: 90%;
      height: 20px;
      border: 5px solid #fff;
      border-radius: 10px;
      box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2);
    }
  }

  .receipts-wrapper {
    overflow: hidden;
    margin-top: -10px;
    padding: 0 20px 10px 20px;
  }

  .receipts {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    transform: translateY(-510px);

    animation-duration: 2.5s;
    animation-delay: 500ms;
    animation-name: print;
    animation-fill-mode: forwards;

    .receipt {
      padding: 25px 30px;
      text-align: left;
      min-height: 200px;
      width: 100%;
      background-color: #fff;
      box-shadow: 1px 3px 8px 3px rgba(0, 0, 0, 0.2);

      .airliner-logo {
        max-width: 80px;
      }

      .route {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px 0;

        .plane-icon {
          width: 30px;
          height: 30px;
        }

        h2 {
          font-weight: 300;
          font-size: 16px;
          margin: 0;
        }
      }

      .details {
        .item {
          display: flex;
          flex-direction: column;
          min-width: 70px;

          span {
            font-size: 12px;
            color: rgba(28, 28, 28, 0.7);
            font-weight: 500;
          }
          h3 {
            margin-top: 10px;
            margin-bottom: 25px;
          }
        }
      }
    }

    .qr-code {
      padding: 25px 30px;
      text-align: left;
      width: 100%;
      background-color: #fff;
      position: relative;
      display: flex;
      align-items: center;

      &::before {
        content: "";
        background: linear-gradient(to right, #fff 50%, #3f32e5 50%);
        background-size: 22px 4px, 100% 4px;
        height: 2px;
        width: 90%;
        display: block;
        left: 0;
        right: 0;
        top: -1px;
        position: absolute;
        margin: auto;
      }

      .qr-code-image {
        flex-shrink: 0;
        width: 70px;
        height: 70px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid #e0e0e0;
      }

      .description {
        margin-left: 20px;

        h2 {
          margin: 0 0 5px 0;
          font-weight: 500;
          font-size: 13px;
        }

        p {
          margin: 0;
          font-weight: 400;
          font-size: 12px;
        }
      }
    }
  }
}

@keyframes print {
  0% {
    transform: translateY(-510px);
  }
  35% {
    transform: translateY(-395px);
  }
  70% {
    transform: translateY(-140px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
